<template>
  <div class="vue-countup clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card mb15" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16"><a class="ml5" target="_blank" href="https://github.com/xlsdg/vue-countup-v2">https://github.com/xlsdg/vue-countup-v2</a></span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install --save countup.js vue-countup-v2
          </code>
        </div>
      </el-card>
      <div class="iCountUp">
        <ICountUp
          :startVal="startVal"
          :endVal="endVal"
          :decimals="decimals"
          :duration="duration"
          :options="options"
          @ready="onReady"
        />
      </div>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
import ICountUp from 'vue-countup-v2'

export default {
  name: 'VueCountup',
  components: {
    ICountUp
  },
  data () {
    return {
      startVal: 0,
      endVal: 120500,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: ''
      }
    }
  },
  methods: {
    onReady: function (instance, CountUp) {
      let that = this
      instance.update(that.endVal + 100)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-countup{
  margin: 0 auto;
  overflow: hidden;
  .main{
    padding: 10px;
    .iCountUp {
      font-size: 12em;
      margin: 0;
      color: #4d63bc;
    }
  }
}
</style>
